<template>
  <div class="ant-pro-pages-account-projects-cardList">
    <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card class="ant-pro-pages-account-projects-card" hoverable>
          <img slot="cover" :src="item.cover" :alt="item.title" />
          <a-card-meta :title="item.title">
            <template slot="description">
              <ellipsis :length="50">{{ item.description }}</ellipsis>
            </template>
          </a-card-meta>
          <div class="cardItemContent">
            <span>{{ item.updatedAt | fromNow }}</span>
            <div class="avatarList">
              <avatar-list size="small">
                <avatar-list-item
                  v-for="(member, i) in item.members"
                  :key="`${item.id}-avatar-${i}`"
                  :src="member.avatar"
                  :tips="member.name"
                />
              </avatar-list>
            </div>
          </div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import moment from 'moment'
import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
const TagSelectOption = TagSelect.Option
const AvatarListItem = AvatarList.Item

export default {
  name: 'Project',
  components: {
    AvatarList,
    AvatarListItem,
    Ellipsis,
    TagSelect,
    TagSelectOption,
    StandardFormRow
  },
  data () {
    return {
      data: [
        {
          id: 1,
          title: '城市建筑航拍项目',
          description: '使用无人机对城市建筑进行航拍，收集高质量的图像和视频数据，用于城市规划和建筑设计。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 3,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
              name: '张三'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
              name: '李四'
            }
          ]
        },
        {
          id: 2,
          title: '农田监测系统',
          description: '开发农田监测系统，使用无人机定期收集农田数据，分析作物生长状况和病虫害情况。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 5,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
              name: '王五'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
              name: '赵六'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
              name: '孙七'
            }
          ]
        },
        {
          id: 3,
          title: '电力线路巡检',
          description: '使用无人机对电力线路进行定期巡检，检测线路故障和安全隐患，提高电力系统的可靠性。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 7,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
              name: '周八'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
              name: '吴九'
            }
          ]
        },
        {
          id: 4,
          title: '森林防火监测',
          description: '建立森林防火监测系统，使用无人机进行森林巡查，及时发现火灾隐患和火情，保护森林资源。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 10,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
              name: '郑十'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
              name: '王五'
            }
          ]
        },
        {
          id: 5,
          title: '交通流量监测',
          description: '开发交通流量监测系统，使用无人机收集城市交通数据，分析交通流量和拥堵情况，优化交通管理。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 12,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
              name: '赵六'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
              name: '孙七'
            }
          ]
        },
        {
          id: 6,
          title: '应急救援辅助系统',
          description: '开发应急救援辅助系统，使用无人机在灾害现场进行侦察和搜救，提高救援效率和安全性。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 15,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
              name: '周八'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
              name: '张三'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
              name: '李四'
            }
          ]
        },
        {
          id: 7,
          title: '文物古迹保护项目',
          description: '使用无人机对文物古迹进行三维建模和数字化保存，为文物保护和修复提供技术支持。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 18,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
              name: '吴九'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
              name: '郑十'
            }
          ]
        },
        {
          id: 8,
          title: '环境污染监测',
          description: '开发环境污染监测系统，使用无人机收集空气和水质数据，监测环境污染情况，为环保工作提供数据支持。',
          cover: 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
          status: 'active',
          updatedAt: Date.now() - 1000 * 60 * 60 * 24 * 20,
          members: [
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
              name: '王五'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
              name: '赵六'
            },
            {
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
              name: '孙七'
            }
          ]
        }
      ],
      loading: false
    }
  },
  filters: {
    fromNow (date) {
      return moment(date).fromNow()
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-pro-pages-account-projects-cardList {
    margin-top: 24px;

    :deep(.ant-card-meta-title) {
      margin-bottom: 4px;
    }

    :deep(.ant-card-meta-description) {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }

    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;

      > span {
        flex: 1 1;
        color: rgba(0,0,0,.45);
        font-size: 12px;
      }

      :deep(.ant-pro-avatar-list) {
        flex: 0 1 auto;
      }
    }
  }
</style>
